import { Input,Upload, message, Button, Icon } from 'antd';
import { connect } from "dva";
import {useState,useEffect} from 'react';
import styles from './addUser.css';

// const fileList = []
// const props1 = {
//   action: '',
//   listType: 'picture',
//   defaultFileList: [...fileList],
// };

function addUser(props) {
	let value1 ="";
	let value2 ="";
	let value3 ="";
	let value4 ="";
	
	useEffect(()=>{
		console.log(props)
	})
	
	
	
  return (
    <div className={styles.normal}>
      <h1>用户添加</h1>
	  <Input placeholder="用户名" type="text" ref={(val) =>value1 = val}/>
	  <Input.Password placeholder="密码" type="password" ref={(val) =>value2 = val}/>
	  <Input placeholder="昵称" type="text" ref={(val) =>value3 = val}/>
	  <Input placeholder="头像" type="text" ref={(val) =>value4 = val}/>
	  {/*<Upload {...props1}>
	        <Button className={styles.upload}>
	          <Icon type="upload" ref='upload'/> 上传头像
	        </Button>
	     </Upload>*/}
		<Button type="primary" className={styles.add} onClick={()=>
		props.dispatch({
			type:'info/addUser',
			payload:{
				userName:value1.state.value,
				password:value2.input.defaultValue,
				nickName:value3.state.value,
				avatar:value4.state.value
			}
		}).then(()=>{
			console.log(props.mess)
			if(props.mess == 'error'){
				message.error('用户名已存在~')
				setTimeout(function() {
					props.history.go(0)
				},0);
			}else{
				message.success('添加成功~')
				setTimeout(function() {
					props.history.go('/home/userList')
				},0);
			}
		})
	}>添加</Button>
    </div>
  );
}
export default connect(state=>state.info)(addUser)